<template>
  <div class="netBox wrap scrollBar">
    <div class="topCon">
      <div class="title">配置导出</div>
      <div class="configExport">
        <el-button type="primary" @click="exportConfig">配置导出</el-button>
      </div>
    </div>
    <div class="centerCon">
      <div class="title">配置导入</div>
      <div class="configImport">
        <div class="upload-box">
          <el-input
            placeholder="未选择文件"
            v-model="fileName"
            :readonly="true"
          >
            <el-upload
              slot="append"
              :action="actionUrl"
              :show-file-list="false"
              :on-change="changeUpload"
              ref="upload"
            >
              <el-button style="width: 100px">浏览</el-button>
            </el-upload>
          </el-input>
          <div style="margin-top: 10px; color: #ca2222">
            <b>提示: </b>配置文件扩展名为 .gz 格式
          </div>
        </div>
        <el-button type="primary" @click="importConfig">配置导入</el-button>
      </div>
    </div>
    <div class="bottomCon">
      <div class="title">恢复出厂设置</div>
      <div class="configRecover">
        <el-button type="primary" @click="recover">恢复出厂设置</el-button>
      </div>
    </div>
    <div class="mark" v-if="isMark">
      <div class="loadTip">
        <img src="../../assets/images/status/loading.png" alt="" />
        <div style="margin: 10px 0 0 -10px">上传中,请稍后...</div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="isImport"
      width="500px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal='false'
    >
      <div slot="title" class="header-title">
        <img src="../../assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div style="margin-bottom: 5px">配置导入成功, 需重新启动后生效,</div>
      <div>是否立即重启 ?</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="saveImp(1)">否</el-button>
        <el-button type="shi" @click="saveImp(2)">是</el-button>
      </span>
    </el-dialog>
    <!-- 恢复出厂确认框 -->
    <el-dialog
      :title="title"
      :visible.sync="isRecover"
      width="350px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal='false'
    >
      <div slot="title" class="header-title">
        <img src="../../assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div>是否需要恢复出厂设置 ?</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="comfirm(1)">否</el-button>
        <el-button type="shi" @click="comfirm(2)">是</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/baseConfig.less";
export default {
  name: "configmanagement",
  data() {
    return {
      title: "提示",
      isRecover: false,
      isImport: false,
      fileName: "", //上传文件名称
      actionUrl: "", //上传的地址
      isMark: false, //蒙版加载
    };
  },
  methods: {
    // 配置导出
    exportConfig() {},
    // 配置导入
    importConfig() {
      if (this.fileName == "") {
        this.$message({
          message: "请选择配置文件",
          type: "error",
          offset: "100",
          duration: "1500",
        });
      } else {
        this.isImport = true;
      }
    },
    // 上传时的限制
    changeUpload(file, fileList) {
      console.log(file, fileList, "成功");
      if (file.status == "success") {
        this.isMark = false;
      } else {
        this.isMark = true;
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      if (/.gz$/.test(file.name)) {
        this.fileName = file.name;
      } else {
        this.$message({
          message: "请选择文件扩展名为 .gz 格式的文件",
          type: "error",
          offset: "100",
          duration: "2000",
        });
      }
    },
    //恢复出厂设置
    recover() {
      this.isRecover = true;
    },
    // 导入
    saveImp(type) {
      if (type === 1) {
        this.isImport = false;
      } else {
        this.isImport = false;
      }
    },
    // 恢复出厂
    comfirm(type) {
      if (type === 1) {
        this.isRecover = false;
      } else {
        this.isRecover = false;
      }
    },
  },
};
</script>

<style lang="less">
.upload-box {
  margin-bottom: 30px;
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0;
    color: #4c5967;
    background-color: #f2f2f2;
  }
  .el-input__inner {
    width: 3rem;
    font-size: 13px;
  }
  .el-button {
    font-size: 12px;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    width: 80px;
  }
}
</style>
<style lang='less' scoped>
.positon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
.netBox {
  .el-button {
    cursor: pointer;
  }
  .topCon {
    height: 200px;
    .configExport {
      .positon();
    }
  }
  .centerCon {
    height: 260px;
    margin-top: 15px;
    .configImport {
      text-align: center;
      .positon();
      top: 35%;
    }
  }
  .bottomCon {
    height: 210px;
    margin-top: 15px;
    .configRecover {
      .positon();
      .el-button {
        width: 120px;
      }
    }
  }
  .mark {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .loadTip {
      position: absolute;
      left: 59%;
      top: 45%;
      transform: translateX(-50%);
      color: #fff;
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>

